{% extends 'eform_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}
    <title>New Form Schema</title>
{% endblock title %}

{% block head %}

<!-- <link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'> -->
<link rel='stylesheet' href="{% static 'eform/formio.full.min.css' %}">
<style>
  body{
        background-image: none;
        background-color: white;
    }
</style>
{% endblock head %}


{% block body %}
    <div class="container-fluid">
        <br>
        
        <div class="card">

            <!-- <div class="card-header">
                <h1>{% trans 'Meta' %}</h1>
            </div> -->
            <div class="card-body">

                <form action="" method="post" id="submitForm">
                    {% csrf_token %}
                    <input type="hidden" name="dataJson" id="dataJson">
                    <div class="row">
                        <div class="col-lg-4 col-12">
                            <div class="form-group">
                              <label for="form_no">Form No.</label>
                              <input type="text" required
                                class="form-control" name="form_no" id="form_no" aria-describedby="form_no" placeholder="Form No.">
                              <small id="form_no" class="form-text text-muted">Form No.</small>
                            </div>
                        </div>
                        
                        <div class="col-lg-4 col-12">
                            <div class="form-group">
                              <label for="form_title">Form Title</label>
                              <input type="text" required
                                class="form-control" name="form_title" id="form_title" aria-describedby="form_title" placeholder="Form Title">
                              <small id="form_title" class="form-text text-muted">Title Of the Form</small>
                            </div>
                        </div>
                        <div class="col-lg-4 col-12">
                          <div class="form-group">
                            <label for="form_title">Issue</label>
                            <input type="text"  
                              class="form-control" name="issue" id="issue" aria-describedby="issue" placeholder="Issue">
                            <small id="issue" class="form-text text-muted">Issue</small>
                          </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <!-- <div class="col-lg-4 col-12">
                            <div class="form-group">
                              <label for="issue">Issue</label>
                              <input type="text" required
                                class="form-control" name="issue" id="issue" aria-describedby="issue" placeholder="Issue">
                              <small id="issue" class="form-text text-muted">Issue</small>
                            </div>
                        </div> -->
                        <div class="col-lg-4 col-12">
                            <div class="form-group">
                              <label for="ref">Ref.</label>
                              <input type="text" required
                                class="form-control" name="ref" id="ref" aria-describedby="ref" placeholder="Ref">
                              <small id="ref" class="form-text text-muted">Ref.</small>
                            </div>
                        </div>
                        <div class="col-lg-4 col-12">
                            <div class="form-group">
                              <label for="">Endorse Require</label>
                              <select class="form-control" name="endorsor_require" id="id_verify_require">
                                <option val="yes">Yes</option>
                                <option val="no">No</option>
                              </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-12">
                          <div class="form-group">
                            <div class="form-group">
                              <label for="form_issue_date">Form Issue Date</label>
                              <input type="date"
                                class="form-control" name="form_issue_date" id="form_issue_date" aria-describedby="form_issue_date" placeholder="">
                            </div>
                          </div>
                        </div>
                    </div>
                    
                    
                </form>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col text-right">
                        <button type="button" name="create" value="create" id="btn-create-form" class="btn btn-success">Create</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="builder" class="p-3">

    </div>
    
{% endblock body %}


{% block script %}
<script src="{% static 'eform/formio.full.min.js' %}"></script>
<script>

    var components = {{components|safe}}
    var schemaJson={}
</script>
<script src="{% static 'eform/builder_pre_componets.js' %}"></script>
<script src="{% static 'eform/formBuilder.js' %}"></script>
{% endblock script %}

    